/* KMS系统共享响应式样式 */

/* 响应式断点定义 */
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* 全局响应式优化 */
@media (max-width: 767px) {
  /* 主内容区域自适应 */
  section {
    margin: 0 !important;
    padding: 0.5rem !important;
  }
  
  /* 页面标题区域优化 */
  header {
    padding: 1rem !important;
  }
  
  h1 {
    font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
  }
  
  /* 卡片自适应 */
  .card {
    margin-bottom: 1rem !important;
    padding: 1rem !important;
  }
  
  /* 表格响应式处理 */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /* 按钮组响应式 */
  .button-group {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .button-group button {
    width: 100% !important;
  }
  
  /* 表单响应式 */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* 标签页导航响应式 */
  .tabs {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .tab-btn {
    text-align: left;
  }
  
  /* 搜索框响应式 */
  .search-container {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .search-input {
    width: 100% !important;
  }
  
  /* 统计卡片响应式 */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* 模态框响应式 */
  .modal {
    padding: 0.5rem !important;
  }
  
  .modal-content {
    margin: 1rem !important;
    width: calc(100% - 2rem) !important;
    max-width: none !important;
  }
  
  /* 取证人员卡片响应式 */
  .personnel-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* 验证人员网格响应式 */
  #verifiersGrid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  }
  
  /* 进度条响应式 */
  .progress-bar {
    height: 8px !important;
  }
}

/* 平板设备响应式优化 */
@media (min-width: 768px) and (max-width: 1023px) {
  section {
    margin: 1rem !important;
    padding: 1rem !important;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .form-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .personnel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 用户体验优化 */

/* 触摸反馈增强 */
@media (hover: none) and (pointer: coarse) {
  button, .tab-btn, .search-input, .btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  button:active, .tab-btn:active, .btn:active {
    transform: scale(0.98);
    transition: transform 0.05s;
  }
}

/* 滚动条优化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(240, 240, 240, 0.5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.5);
}

/* 焦点状态优化 */
button:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

/* 加载动画增强 */
.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* 减少动画延迟，提升体验 */
.fade-in {
  animation-delay: 0.01s !important;
}

/* 确保表格行高适应内容 */
table td {
  vertical-align: middle;
  word-break: break-word;
}

/* 确保状态徽章在小屏幕上也能完整显示 */
.status-badge {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
}

/* 工具提示响应式优化 */
.tooltip {
  display: none;
}

@media (min-width: 768px) {
  .tooltip {
    display: block;
  }
}